<template>
	<view class="background">
		<view class="tooltip">
			<view class="tooltip-triangle"></view>
		    <view v-if="carNum && name" class="tooltip-text">
				<view style="display: flex; flex-direction: row; align-items: center;">
					<image
						style="width: 50upx; height: 50upx; margin-right: 10upx;"
						src="../../static/icon_car_info.png"/>
					<text style="font-size: 30rpx;" space="emsp">{{`${carNum}`}}</text>
				</view>
				<view style="display: flex; flex-direction: row; align-items: center; margin-left: 30upx;">
					<image
						style="width: 35upx; height: 35upx; margin-right: 10upx;"
						src="../../static/icon_driver.png"/>
					<text
						style="text-align: right; min-width: 50%; font-size: 30rpx;"
						space="ensp">
						{{`${name} ${phone}`}}
					</text>
				</view>
			</view>
			
			<view v-else class="tooltip-text" style="justify-content: center;">
				<text style="font-weight: bold;">待指派</text>
			</view>
		    
		</view>
		<scroll-view scroll-y class="order_list">
			<view
				v-for="(order, orderIndex) in orderInfoList"
				:key="orderIndex"
				class="order_item">
				<view>
					<view class="order_info_item" style="justify-content: space-between;">
						<view class="order_info_item">
							<view class="site_sign" style="background: #2697FF;"/>
							<text style="font-weight: 400; font-size: 34upx; margin-left: 10upx;">{{order.stationUp}}</text>
						</view>
						<text
							class="state_view"
							:style="{'color': orderState[order.orderState].color}">
							{{orderState[order.orderState].lable}}
						</text>
					</view>
					<view v-if="order.orderState == 5 ">
						<view class="order_info_item" style="justify-content: space-between; margin-top: 30upx;">
							<view class="order_info_item">
								<view class="site_sign" style="background: #FF603F;"/>
								<text style="font-weight: 400; font-size: 34upx; margin-left: 10upx;">{{order.stationOf}}</text>
							</view>
						</view>
						<view 
							style="display: flex; 
							flex-direction: row; justify-content: space-between; width: 100%;">
							<view style="height: 220upx; display: flex; flex-direction: column; justify-content: space-around;">
								<view class="order_info_item" style="height: 50upx;">
									<view class="site_sign" />
									<text 
										space="ensp"
										style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
										{{`座 位: ${order.seatNum || ""} 号`}}
									</text>
								</view>
								<view class="order_info_item" style="height: 50upx;">
									<view class="site_sign" />
									<text 
										space="ensp"
										style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
										{{`乘车人: ${order.passengerName || ""} ${order.passengerPhone || ""}`}}
									</text>
								</view>
								<view class="order_info_item" style="height: 50upx;">
									<view class="site_sign" />
									<view class="">
										<text space="ensp" style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
											费用: 
											<text space="ensp" style="font-size: 26upx; color: red;"> ￥</text>
											<text style="font-weight: bold; color: red;">{{order.actualAmount}}</text>
										</text>
									</view>
								</view>
							</view>
							<tki-qrcode
								:cid="order.orderId" 
								ref="qrcode" 
								:val="order.orderDetailId" 
								size="170" 
								unit="upx" 
								lv="2" 
								loadMake="true" 
								:usingComponents="true" />
						</view>
					</view>
					<view v-else>
						<view class="order_info_item" style="justify-content: space-between;">
							<view class="order_info_item">
								<view class="site_sign" style="background: #FF603F;"/>
								<text style="font-weight: 400; font-size: 34upx; margin-left: 10upx;">{{order.stationOf}}</text>
							</view>
							<view class="">
								<text style="font-size: 26upx; color: red;">￥</text>
								<text style="font-weight: bold; color: red;">{{order.actualAmount}}</text>
							</view>
						</view>
						<view class="order_info_item" style="height: 50upx;">
							<view class="site_sign" style="background: #2697FF; opacity: 0;"/>
							<text 
								space="ensp"
								style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
								{{`座 位: ${order.seatNum || ""} 号`}}
							</text>
						</view>
						<view class="order_info_item" style="height: 50upx;">
							<view class="site_sign" style="background: #2697FF; opacity: 0;"/>
							<text 
								space="ensp"
								style="font-size: 30rpx; color: #949699; margin-left: 10upx;">
								{{`乘车人: ${order.passengerName || ""} ${order.passengerPhone || ""}`}}
							</text>
						</view>
					</view>
				</view>
				<view class="order_item_btn_warp">
					<!-- <view
						@click.stop="cancel(order.orderId)"
						v-if="order.orderState == 1"
						class="rder_item_btn" style="border-color: #949699; color: #949699;">
						<text>取消订单</text>
					</view> -->
					<view
						@click.stop="backMoney(order.orderId, order.orderDetailId)"
						v-if="order.orderState == 5"
						class="rder_item_btn" style="border-color: #949699; color: #949699;">
						<text>退款</text>
					</view>
					<!-- <view
						@click.stop="openTicket(order.orderId)"
						v-if="order.orderState == 6 && order.isInvoiceState == 2 "
						class="rder_item_btn" style="border-color: #949699; color: #949699;">
						<text>开发票</text>
					</view>
					<view
						@click.stop="payOrder(order)"
						v-show="order.orderState == 1"
						class="rder_item_btn" style="border-color: #FF8103; color: #FF8103;">
						<text>去支付</text>
					</view> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import api from '../../api';
export default {
	components: {},
	
	data() {
		return {
			orderId: '',
			carNum: '',
			name: '',
			phone: '',
			serviceScore: '',
			orderInfoList: [],
			orderState: {
				1: { color: '#FF603F', lable: '待支付'},
				2: { color: '#18C47C', lable: '已支付'},
				5: { color: '#FF8103', lable: '待出行'},
				6: { color: '#949699', lable: '已出行'},
				7: { color: '#949699', lable: '已取消'},
				9: { color: '#2697FF', lable: '退款中'},
				10: { color: '#949699', lable: '退款成功'},
				11: { color: '#949699', lable: '取消退款'},
				12: { color: '#949699', lable: '退款失败'},
			}
		};
	},
	
	onLoad(option) {
		this.orderId = option.orderId;
		console.log(this.orderId);
		this.getOrderDetail();
	},
	
	methods: {
		async getOrderDetail() {
			const { code, data } = await api.order.queryOrderStateAndDetailId({ orderId: this.orderId });
			if(code === 200) {
				this.orderInfoList = data?.tsOrderDetailInfoMPVOS || [];
				this.carNum = data?.carNum || '',
				this.name = data?.name || '',
				this.phone = data?.phone || '',
				this.serviceScore = data?.serviceScore || '',
				uni.setNavigationBarTitle({
					title: `${data?.fromCity} - ${data?.endCity}`
				})
			}
		},
		backMoney(orderId, orderDetailId) {
			uni.showModal({
				content: '确定要退款吗？',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title:'退款中...'
						})
					    api.order.refundById({ orderId,orderDetailId }).then(res => {
					    	if (res.code == 200) {
					    		uni.showToast({
					    			title: '退款成功',
					    			duration: 1500,
					    			icon: 'none'
					    		});
					    		this.getOrderDetail();
					    	} 
							else {
								uni.showModal({
									content:res.msg
								})
								this.getOrderDetail();
					    	}
					    }).finally(res=>{
							uni.hideLoading()
						});       
					}
					
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.background {
	height: 100%;
	background: #F7F7F7;
	background-image: url(../../static/order_detail_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 250upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.tooltip {
		width: 94%;
		position: relative;
	}
	.tooltip-text {
		display: flex;
		flex-direction: row;
		
	    padding: 15rpx;
	    background: #FFFFFF;
	    border-radius: 10rpx;
	    color: #000000;
		font-size: 32upx;
	}
	// .tooltip-triangle {
	//     position: relative;
	//     left: 47%;
	//     width: calc(30rpx * 1.41);
	//     height: 30rpx;
	//     overflow: hidden;
	// }
	// .tooltip-triangle::after {
	//     content: '';
	//     width: 100%;
	//     height: 100%;
	//     background: #68BBFF;
	//     display: block;
	//     transform: rotate(45deg);
	//     transform-origin: left bottom;
	// }
	.order_list {
		width: 100%;
		padding: 20upx 0;
		height: calc(100% - 100upx);
		.order_item {
				background: #FFFFFF;
				border-radius: 16upx;
				padding: 20upx;
				margin: 20upx;
				.order_item_head {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom-style: solid 1upx red;
					.order_time {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-weight: 200;
						line-height: 30upx;
						color: #949699;
						image {
							width: 30upx;
							height: 30upx;
							margin-right: 10upx;
						}
					}
					text {
						font-size: 30rpx;
						color: #949699;
						font-weight: bold;
					}
				}
				.order_info {
					
				}
				.order_info_item {
					display: flex;
					flex-direction: row;
					align-items: center;
					height: 75upx;
					.state_view {
						text-align: right;
						margin-left: 10upx;
						min-width: 120upx;
						font-size: 28rpx;
						font-weight: bold;
					}
					.site_sign {
						width: 20upx;
						height: 20upx;
						border-radius: 50%;
					}
				}
				.order_item_btn_warp {
					display: flex;
					flex: row;
					flex-direction: row-reverse;
					.rder_item_btn {
						width: 180upx;
						height: 70upx;
						border-radius: 16upx;
						border-style: solid;
						border-width: 1upx;
						line-height: 70upx;
						font-size: 34rpx;
						text-align: center;
						margin-left: 10upx;
					}
				}
			}
	}
}
</style>
